<template>
	<view class="pro">
		<profilterbar :toTop="toTop" @changeFilrer="changeFilrer"></profilterbar>
		<mescroll-uni top="120" ref="mescrollRef" :up="upOption" :down="downOption" @init="mescrollInit" @up="upCallback" @down="downCallback" :fixed="false">
			<view class="list">
				<pro-item
					v-for="(items, indexs) in productList"
					:key="indexs"
					:index="indexs"
					:proinfo="items"
					direction="row"
					:width="proWidth"
					@changeNum="info => changeInfo(info, indexs)"
				></pro-item>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
import profilterbar from '@/components/profilterbar';
import proItem from '@/components/pro-item';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
export default {
	name: 'pros',
	mixins: [MescrollMixin],
	data() {
		return {
			productList: [],
			proWidth: uni.upx2px(200) + 'px',
			downOption: {
				auto: false // 不自动加载
			},
			upOption: {
				auto: false // 不自动加载
			},
			filter: {}
		};
	},
	props: {
		toTop: {
			type: [String, Number],
			default: 0
		}
	},
	components: { profilterbar, proItem },
	methods: {
		init(shopId, cateId) {
			this.cateId = cateId;
			this.shopId = shopId;
			this.mescroll.resetUpScroll();
		},
		downCallback() {
			this.mescroll.resetUpScroll();
		},
		upCallback() {
			this.getProductList();
		},
		changeFilrer(filter) {
			// this.filter = Object.keys(filter).length > 0 ? { ...filter } : {};
			this.filter = {};
			if (Object.keys(filter).length > 0) {
				for (var key in filter) {
					if (filter[key]) {
						this.filter.order_by = key;
						this.filter.order_by_type = filter[key];
						break;
					}
				}
			}
			this.productList = [];
			this.mescroll.resetUpScroll();
		},
		getProductList(type) {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize,
				sid: this.shopId
			};
			if (this.cateId) {
				param.class_id = this.cateId;
			}
			param = {
				...param,
				...this.filter
			};
			this.$postAction(this.$api.getProductList, param, {
				custom: {
					ShowLoading: false
				}
			}).then(da => {
				if (da.code == 0 && da.data && da.data.length > 0) {
					let curPageData = da.data;
					this.mescroll.endBySize(curPageData.length, da.count);
					if (this.mescroll.num == 1) this.productList = []; //如果是第一页需手动制空列表
					this.productList = this.productList.concat(curPageData); //追加新数据
				} else {
					if (this.mescroll.num == 1) this.productList = [];
					this.mescroll.endSuccess(0, false);
				}
			});
		},
		changeInfo(info, index) {
			this.$set(this.productList, index, info);
		}
	}
};
</script>

<style>
.pro {
	position: relative;
	z-index: 99;
	background: #fff;
	padding: 24upx 28upx;
	height: 100%;
}
</style>
